<template>

  <el-dialog title="汇率历史记录" :visible.sync="visible" :close-on-click-modal="false" width="80%">

    <!--主列表数据-->
    <d2-crud
      ref="d2Crud"
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :selection-row="mainTable.allowSelect"
      :loading="mainTable.loading"
      @current-change=""
      @row-dblclick=""
      @selection-change=""
    ></d2-crud>

    <template slot="footer" class="dialog-footer">

      <el-pagination
        style="float: left"
        size="mini"
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
        >
      </el-pagination>
      <el-button @click="close" size="small">关 闭</el-button>

    </template>

  </el-dialog>

</template>

<script>

import ApiMain from '@/api/exchangeRate.rateBoc';

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      visible   : false,
      loading         : false,

      mainQueryRaw: null,
      mainQuery: {
      },

      mainTable: {
        loading: false,
        options: {
          border             : true,
          stripe             : true,
          // highlightCurrentRow: true,
          emptyText          : '暂无数据',
          size               : 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          {title: '货币名称', key: 'currency', align: 'center', showOverflowTooltip: true},
          {title: '现汇买入价', key: 'buyPrice', align: 'center', showOverflowTooltip: true},
          {title: '现钞买入价', key: 'cashBuyPrice', align: 'center', showOverflowTooltip: true},
          {title: '现汇卖出价', key: 'sellPrice', align: 'center', showOverflowTooltip: true},
          {title: '现钞卖出价', key: 'cashSellPrice', align: 'center', showOverflowTooltip: true},
          {title: '中行折算价', key: 'bocPrice', align: 'center', showOverflowTooltip: true},
          {title: '同步时间', key: 'syncTime', align: 'center', showOverflowTooltip: true},
          // {title: '系统更新汇率时间', key: 'syncTime', align: 'center', showOverflowTooltip: true},
        ],
        list: [],
        pagination: {
          currentPage: 1,
          pageSize   : 20,
          total      : 0,
          pageSizes  : [20, 50, 100]
        },
        current: null,
      },

      data: null,
    }
  },
  mounted () {
      this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {

    show (data) {

      this.reset();

      this.data = data;

      this.fetchMainData();

      this.visible = true;
    },

    close () {
      this.visible = false;
      this.$emit('dialog-close');
    },

    reset () {
      this.mainTable.loading = false;
      this.mainTable.list = [];
      this.mainTable.pagination.currentPage = 1;
      this.data = null;
    },


    buildMainQuery () {

      var query = {
        page  : this.mainTable.pagination.currentPage,
        limit : this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      query.rateBocId = this.data.id;

      return query;
    },

    renderMainData (re) {

      re.list.forEach(item => {
        item.buyPrice      = item.buyPrice > 0 ? item.buyPrice / 10000 : '';
        item.cashBuyPrice  = item.cashBuyPrice > 0 ? item.cashBuyPrice / 10000 : '';
        item.sellPrice     = item.sellPrice > 0 ? item.sellPrice / 10000 : '';
        item.cashSellPrice = item.cashSellPrice > 0 ? item.cashSellPrice / 10000 : '';
        item.bocPrice      = item.bocPrice > 0 ? item.bocPrice / 10000 : '';
      })

      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    async fetchMainData () {
      this.mainTable.loading = true;

      try {
        var re = await ApiMain.getHistoryList(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) {
        console.error(err);
      }

      this.mainTable.loading = false;
    },

    handleMainSizeChange (val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;

      this.fetchMainData()
    },
    handleMainPageChange (val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData()
    },



  }
}
</script>

<style>

</style>
